<template>
    <view>
        <view class="date-input-container">
            <view class="input-wrapper">
                <u-input @click="openDatePicker()" v-model="dateDisplay" placeholder="请选择预约日期" border="border" clearable
                    :disabled="true" @clear="clearDate">
                    <template #suffix>
                        <u-icon name="calendar" size="20"></u-icon>
                    </template>
                </u-input>
            </view>
            <!-- <uni-datetime-picker :show="showDatePicker" type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" /> -->
            <u-picker mode="time" :start-year="new Date().getFullYear()" v-model="showDatePicker"
                @confirm="dateConfirm"></u-picker>
        </view>
        <mescroll-uni :top="120" ref="mescrollRef" @init="mescrollInit" :up="upOption" @down="downCallback"
            @up="upCallback">
            <view class="list-box">
                <view class="list-cont">
                    <view class="list-item" v-for="(item, index) in MeetrommList" :key="item.id">
                        <view class="list-item-left">
                            <u-image v-if="item.photos && item.photos.length"
                                :src="'http://saasimg.ewguan.com/' + item.photos[0].fileId" width="100px" height="120px"
                                border-radius="10px"></u-image>
                            <u-image v-else src="/static/placeholder.png" width="100px" height="120px" border-radius="10">
                            </u-image>
                        </view>

                        <view class="list-item-right">
                            <view class="list-header">
                                <view class="list-item-right-name">{{item.roomName}}</view>
                                <view class="list-location">
                                    <u-icon name="map" size="40" color="#888"></u-icon>
                                    <text>{{item.locationName || '暂无位置信息'}}</text>
                                </view>
                            </view>

                            <view class="list-item-right-time">
                                <!-- 费用注释 -->
                                <!-- <u-tag :text="item.ruleName" plain type="warning" size="mini"></u-tag> -->
                                <u-tag :text="item.typeName" plain type="error" size="mini" style="margin-left:5px;">
                                </u-tag>
                            </view>

                            <view class="time-slot-container">
                                <view v-for="(slot, slotIndex) in item.timeList" :key="slotIndex" class="time-slot"
                                    :class="{'available': slot.IsReserve === 1, 'unavailable': slot.IsReserve === 0}">
                                    {{slot.Name}}
                                </view>
                            </view>

                            <view class="list-item-right-button">
                                <view>
                                    <u-button type="info" :customStyle="buttonStyle" shape="circle"
                                        @click="gosubscribe(item)">立即预约</u-button>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-uni>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data () {
        return {
            showDatePicker: false,
            dateValue: Date.now(),
            dateDisplay: '',
            minDate: Date.now(),
            params: {
                reserveDate: '',
                currentPage: 1,
                PageIndex: 1,
                sidx: '',
                pageSize: '',
                OrderState: 1
            },
            upOption: {
                noMoreSize: 5,
                empty: {
                    tip: '~ 暂无数据 ~',
                }
            },
            MeetrommList: [],
            buttonStyle: {
                background: '#d28e29',
                color: 'white',
                fontSize: '15px',
                // fontWeight: 'bold',
                width: '100px',
                height: '35px'
            },
        }
    },
    created () {
        this.setDefaultDate();
    },
    methods: {
        setDefaultDate () {
            const date = new Date();
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            this.dateDisplay = `${year}年${month}月${day}日`;
            this.params.reserveDate = `${year}-${month}-${day}`;
        },
        openDatePicker () {
            console.log("打开日期选择")
            this.showDatePicker = true;
        },
        clearDate () {
            this.dateDisplay = '';
            this.params.reserveDate = '';
            this.MeetrommList = [];
            this.mescroll.resetUpScroll();
        },
        mescrollInit (mescroll) {
            this.mescroll = mescroll;
        },
        downCallback (mescroll) {
            this.MeetrommList = [];
            this.mescroll.resetUpScroll();
        },
        upCallback (page) {
            if (!this.params.reserveDate) {
                this.mescroll.endSuccess(0, false);
                return;
            }

            let params = {
                ...this.params
            };
            params.currentPage = page.num;
            params.pageSize = page.size;

            this.$u.api.getMeetrooms(params).then(res => {
                if (page.num === 1) this.MeetrommList = [];
                console.log(res.data)
                if (Array.isArray(res.data)) {
                    this.MeetrommList = [...this.MeetrommList, ...res.data];
                }
                console.log(res)
                this.mescroll.endBySize(this.MeetrommList.length);
                this.mescroll.optUp.textNoMore = `已全部加载,共${this.MeetrommList.length}条数据`;
            }).catch(err => {
                this.$refs.uToast.show({
                    message: err.message || '加载数据失败',
                    type: 'error',
                });
                this.mescroll.endErr();
            });
        },
        gosubscribe (item) {
            if (!this.params.reserveDate) {
                this.$refs.uToast.show({
                    message: '请先选择预约日期',
                    type: 'warning',
                });
                return;
            }

            // 获取可预约时间段
            const availableTimes = item.timeList
                .filter(slot => slot.isReserve === 1)
                .map(slot => slot.name);

            uni.$u.route({
                url: '/pages/meeting/reserveDay/selecttime',
                params: {
                    RoomId: item.id,
                    RoomName: item.roomName,
                    Photos: JSON.stringify(item.Photos || []),
                    LocationName: item.locationName,
                    reserveDate: this.params.reserveDate,
                    availableTimes: JSON.stringify(availableTimes)
                }
            });
        },
        dateConfirm (e) {
            const {
                year,
                month,
                day
            } = e;
            this.dateDisplay = `${year}年${month}月${day}日`;
            this.params.reserveDate = `${year}-${month}-${day}`;
            this.showDatePicker = false;
            this.MeetrommList = [];
            this.mescroll.resetUpScroll();
        }
    }
}
</script>

<style>
page {
    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

.date-input-container {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 12px 15px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.input-wrapper {
    width: 100%;
}

/* 列表容器 */
.list-box {
    padding: 15px 12px;
}

/* 会议室项 */
.list-item {
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    margin-bottom: 15px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.list-item:active {
    transform: scale(0.98);
}

/* 左侧图片 */
.list-item-left {
    width: 110px;
    margin-right: 15px;
    flex-shrink: 0;
}

.list-item-left image{
    border-radius: 10px;
}


/* 右侧内容 */
.list-item-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 会议室名称和位置 */
.list-header {
    margin-bottom: 10px;
}

.list-item-right-name {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.list-location {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
}

.list-location text {
    margin-left: 3px;
}

/* 标签区域 */
.list-item-right-time {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* 时间段容器 */
.time-slot-container {
    display: flex;
    margin-bottom: 15px;
}

/* 时间段样式 */
.time-slot {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 15px;
    margin-right: 8px;
}

.available {
    background-color: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
}

.unavailable {
    background-color: #f5f5f5;
    color: #bfbfbf;
    border: 1px solid #d9d9d9;
}

/* 按钮区域 */
.list-item-right-button {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    
}

/* 标签样式 */
.lirt-item {
    margin-right: 8px;
    margin-bottom: 5px;
}

.list-item-right-button {
    display: flex;
    justify-content: flex-end;
}

.custom-style {
		color: #ff0000;
		width: 400rpx;
	}
</style>